@charset "utf-8";
@import "common";

.engin-box{
	padding: 105px 0 145px;
	// background-color: #fbfaf7;
	background: url(../img/phone.jpg) no-repeat right 15% top 135px #fbfaf7;
	h2{
		font-size: 48px;
		color: #0078d7;
		font-weight: bold;
		margin: 0;
	}
	h4{
		margin: 0;
		margin-top: 33px;
		margin-bottom: 30px;
		font-size: 30px;
		color: #666;
	}
	.engine-content-box{
		margin-top: 47px;
		.img-box{
			width: 64px;
			height: 64px;
			border-radius: 4px;
			background-color: #0078d7;
			text-align: center;
			line-height: 64px;
			overflow: hidden;
			img{
				height: 90%;
			}
		}
		.engine-content-text{
			span{
				font-size: 20px;
				color: #333;
				line-height: 1em;
			}
			p{
				font-size: 14px;
				color: #666;
				margin-top: 6px;
			}
		}
	}
}
.advantage-box{
	h2{
		font-size: 48px;
		color: #8fc31f;
		font-weight: bold;
		margin: 0;
		margin: 110px 0 45px;
	}
	.advantage-cont-box{
		margin-bottom: 15px;
	}
	.advantage-cont-text{
		p{
			font-size: 14px;
			color: #666;
			margin-top: 15px;
		}
	}
}
.big-family{
	width: 100%;
	// height: 900px;
	background-color: #0078d7;
	color: #fff;
	margin-top: 90px;
	.family-cont-box{
		h2{
			font-size: 48px;
			font-weight: bold;
			text-align: center;
			margin: 0;
			margin: 115px 0 80px;
		}
	}
	.family-cont-text{
		margin-bottom: 80px;
		.img-box{
			text-align: center;
			line-height: 64px;
		}
		.family-cont-smalltext{
			span{
				font-size: 32px;
				// line-height: 1em;
			}
			p{
				font-size: 14px;
				margin-top: 16px;
				text-align: justify;
			}
		}
	}
}
.game-box{
	margin-bottom: 50px;
	.game-cont-box{
		margin: 90px 0 50px;
		padding: 0;
		h4{
			font-size: 34px;
			// font-weight: bold;
			color: #666;
		}
		a{
			font-size: 14px;
			color: #666;
			padding-left: 30px;
		}
	}
	.game-img-box{
		padding: 0;
		.img-box{
			video{
				width: 370px;
				height: 200px;
			}
		}
	}
	.game-small-box{
		ul{
			padding: 0;
			list-style: none;
			display: flex;
			justify-content: space-between;
			li{
				text-align: center;
				font-size: 14px;
				color: #666;
				margin-bottom: 20px;;
			}
		}
	}
}
.paniter-box{
	margin-bottom: 40px;
	.paniter-cont-box{
		padding: 0;
		margin: 35px 0;
		h4{
			font-size: 30px;
			color: #666;
			display: inline-block;
		}
		span{
			font-size: 12px;
			color: #666;
		}
	}
	.paniter-link-box{
		ul{
			padding: 0;
			list-style: none;
			display: flex;
			justify-content: space-between;
			li{
				margin-bottom: 20px;
			}
		}
	}
}
@media only screen and (min-width:768px) and (max-width:991px) {
	.engin-box{
		background: #fbfaf7;
		}
	.big-family{
		.family-cont-box{
			.family-cont-text{
				.family-cont-smalltext{
					text-align: center;
					padding-top: 20px;
					p{
						margin: 0 auto;
						text-align: center;
					}
				}
			}
		}
	}
	.game-img-box{
		.img-box{
			text-align: center;
			margin-bottom: 20px;
		}
	}
	.game-small-box{
		ul{
			flex-wrap: wrap;
			li{
				width: 27%;
				img{
					width: 100%;
				}
			}
		}
	}
	.paniter-box{
		.paniter-link-box{
			ul{
				flex-wrap: wrap;
				li{
					width: 27%;
					img{
						width: 100%;
					}
				}
			}
		}
	}
}

@media only screen and (min-width:320px) and (max-width:767px) {
	.engin-box{
		background: #fbfaf7;
		h2{
			font-size: 40px;
		}
		.engine-content-box{
			text-align: left;
		}
	}
	.advantage-box{
		text-align: center;
		h2{
			font-size: 40px;
			margin: 0;
			margin-bottom: 30px;
		}
		.advantage-cont-text{
			text-align: left;
		}
	}
	.big-family{
		.family-cont-box{
			h2{
				font-size: 32px;
			}
			.family-cont-smalltext{
				text-align: center;
			}
		}
	}
	.game-box{
		.game-cont-box{
			h4{
				font-size: 33px;
				margin: 40px auto;
			}
		}
		.game-cont-box{
			margin: 0;
			a{
				position: absolute;
				top: -340%;
				left: 80%;;
			}
		}
		.game-img-box{
			.img-box{
				video{
					width: 100%;
				}
			}
		}
		.game-small-box{
			ul{
				flex-wrap: wrap;
				li{
					width: 45%;
					img{
						width: 100%;
					}
				}
			}
		}
	}
	.paniter-box{
		.paniter-link-box{
			ul{
				flex-wrap: wrap;
				li{
					width: 45%;
					img{
						width: 100%;
					}
				}
			}
		}
	}
	.footer{
		text-align: center;
		.footer-box{
			.footer-i-box{
				margin: 0;
				text-align: center;
				display: inline-block;
			}
		}
	}
	.game-img-box{
		.img-box{
			text-align: center;
			margin-bottom: 20px;
		}
	}
}
@media only screen and (min-width:992px) and (max-width:1199px) {
	.paniter-box{
		.paniter-link-box{
			ul{
				flex-wrap: wrap;
				li{
					width: 27%;
					img{
						width: 100%;
					}
				}
			}
		}
	}
	.footer{
		.footer-box{
			.footer-i-box{
				padding: 0;
				margin: 0;
				margin-left: 50px;
			}
		}
	}
}